因為要開發的是手機版為主的產品，以前只寫過網頁前端，javascript 框架也都是寫 Vue.js 為主，因為這次遛狗狗會是以手機為主，原本想說趁這個機會摸一下 React 也好，但突然發現這樣三十天目標好像會變成 React Native 的學習心得 XD，自己最終目的畢竟還是想將這個思考多年的產品做出來，想說那來查了一下如果較熟悉 Vue.js 的人都會怎麼做呢～

後來就在 Vue Community 上尋找相關的資訊，在 Mobile Apps 的頁面看到這張圖，突然很慌張，這是什麼看不懂啊 QQ！於是只好研究一下這些專有名詞的差別。

Native Apps 原生語言

一般來說指的是該裝置平台官方使用或建議的程式語言， Android 開發使用的是 Java 或 kotlin，iOS 開發使用的是 Objective 或 Swift。

優點是可應用手機功能，如 GPS 定位、相機鏡頭..等。執行速度最快、效能佳、使用者體驗最好，也可離線操作。

但缺點就是無法跨平台，不同平台需要不同的語言，所以人員成本高。上架內容與時間較受限，需經過審核。更新無法及時，需使用者下載更新。

Hybrid Apps 混合式 ( Native + web )

Hybrid Apps 是介於 Native App 與 Web App 之間，是在 Native App 裡，開一個 Web 容器 (一般通稱 Webview) ，然後把網頁載進來。目的是希望可以兼具 Native App 的良好互動體驗，以及 Web App 可跨平台降低開發成本的特性。眾所皆知的 React Native 與 flutter 就是這類的開發方式。

優點是可跨平台開發，且因為是單一程式碼開發，所以較省成本，資源也較多，更新無延遲。

缺點是使用者介面還是有些限制，無法充分發揮每一種手機全部的功用，所以使用者體驗沒這麼好，效能跟速度也沒有 Native Apps 來得好。

PWA

漸進式網路應用程式（Progressive Web Apps，PWA），是由一般網頁或網站架構起來的網路應用程式。其中的 "Progressive"（漸進式）是指應用的設計和功能在任何用戶、任何裝置或任何瀏覽器上都能工作，並隨著用戶互動或技術的進步而逐漸增強。

優勢是

• 可搜尋 discoverable：可搜尋引擎搜尋到
• 可安裝 installable：像傳統 app 一樣 icon 會出現在手機上
• 可連結 linkable：經由網址連結即可分享
• 連結獨立 Connectivity independent：可支援網路較差或離線操作
• 漸進式 progressive：使用者於瀏覽器中即可操作
• 有互動性 Re-engageable：透過類似推播方式與使用者更加互動
• 響應式 responsive：桌機、手機、平板等裝置皆可操作
• 安全 safe：需在加密模式下進行

缺點是有兼容性的問題，雖然大部分瀏覽器都支援 PWA，但在一些舊版本或者特定的瀏覽器上，可能無法完全支援或運行 PWA。功能上也有所限制，如藍牙、NFC 等，不像 Native App 都可使用，或者是特定的系統級別功能（如自動啟動、特定的背景任務等），PWA 可能無法支援。

以上就是各種做法與差異，至於我要怎麼做呢？明天再來想吧～

參考來源：

• Native, Hybrid, Web App, Cross App哪一個是開發App最佳方案呢 ?
• Hybrid or Native: Which Should You Prefer For Your Enterprise in 2021?
• The 10 Best Hybrid App Frameworks in 2023
• PWA介紹 (Progressive Web App)，優、缺點及範例介紹
• Progressive web apps
• PWA是什麼？ PWA 的優點，缺點與開發工具